<template>
  <div>
    <a-card class="searchForm mb-twelve">
      <a-form-model :model="searchForm" layout="inline" :colon="false">
        <a-form-model-item label="模糊搜索" prop="keyName">
          <a-input style="color: #000" v-model="searchForm.keyName" placeholder="请输入关键字搜索" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button @click="search" type="primary">查询</a-button>
          <a-button @click="reset" class="btn-reset">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
    <a-card>
      <div class="flex align-center justify-between flex-wrap card-hr">
        <div class="a-card-title">设备列表11</div>
        <div>
          <a-button type="danger"  @click="del(null)" class="btn-danger">批量删除</a-button>
          <a-button @click="handleOpen('')" type="primary" style="margin-left: 8px;">添加</a-button>
        </div>
      </div>
      <div class="mb-sixteen">
        <a-table bordered :rowKey="(record, index) => {
        return index;
      }
        " :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
          :data-source="list"  :loading="loading" :pagination="false" :scroll="{ x: '100%' }">
          <template slot="online_status"  slot-scope="text,record">
            <div v-if="record.online_status==0">离线</div>
            <div v-else style="color: #167ddc">在线</div>
          </template>
          <template slot="action" slot-scope="text,record">
            <a-button @click="handleGo(record)" type="link"> 设备详情 </a-button>
            <a-button @click="handleOpen(record)" type="link"> 编辑 </a-button>
            <a-button @click="configDeviceVisible = true" type="link"> 配置设备 </a-button>
            <a-button @click="configRulesVisible = true" type="link"> 配置规则 </a-button>
            <a-button type="link" @click="del(record)"  style="color: #F64646;"> 删除 </a-button>

          </template>
        </a-table>

      </div>
      <div class="text-right" v-if="total > 0">
        <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.pageSize"
          :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
          show-size-changer />
      </div>
    </a-card>
    <a-modal :title="title" v-model="visible" :maskClosable="false" :width="830" centered :footer="null">
      <div>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :colon="false" :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-model-item label="设备编号" prop="device_code">
                <a-input v-model="form.device_code" placeholder="设备编号" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="设备名称" prop="device_name">
                <a-input v-model="form.device_name" placeholder="请输入设备名称" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-model-item label="组织名称" prop="sensor_id">
                <a-select v-model="form.sensor_id" placeholder="请选择组织" allowClear style="width:100%">
                  <a-select-option v-for="(item, index) in sessonsList" :value="item.id" :key="index">
                    {{ item.sensor_name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="MAC地址" prop="macAddr">
                <a-input v-model="form.macAddr" placeholder="请输入MAC地址" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-model-item label="位置" prop="device_position">
                <a-input v-model="form.device_position" placeholder="请输入位置" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="经度" prop="longitude">
                <a-input v-model="form.longitude" placeholder="请输入经度" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-model-item label="纬度" prop="latitude">
                <a-input v-model="form.latitude" placeholder="请输入纬度" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="设备类型" prop="device_type">
                <a-input v-model="form.device_type" placeholder="请输入设备类型" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-model-item label="设备型号" prop="device_mode">
                <a-input v-model="form.device_mode" placeholder="请输入设备型号" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="制造商" prop="device_factory">
                <a-input v-model="form.device_factory" placeholder="请输入制造商" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="安装日期"  prop="install_time">
                <a-date-picker v-model="form.install_time" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" placeholder="请选择安装日期" style="width: 100%;" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="描述" prop="describe" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                <a-textarea v-model="form.describe" placeholder="请输入描述" :autoSize="{ minRows: 4, maxRows: 6 }" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="flex align-center justify-center">
        <a-button @click="visible = false"
          style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
        <a-button @click="submit" type="primary">确定</a-button>
      </div>
    </a-modal>

    <a-modal title="配置设备" v-model="configDeviceVisible" :maskClosable="false" :width="510" centered :footer="null">
      <div>
        <a-form-model ref="ruleForm" :model="deviceForm" :rules="deviceRules" :colon="false" :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }">
              <a-form-model-item label="设备编号" prop="id">
                <a-input v-model="deviceForm.id" placeholder="ID" disabled />
              </a-form-model-item>
              <a-form-model-item label="设备名称" prop="deviceName">
                <a-input v-model="deviceForm.deviceName" placeholder="请输入设备名称" />
              </a-form-model-item>
              <a-form-model-item label="终端编码" prop="code">
                <a-select v-model="deviceForm.code" placeholder="请选择终端编码" allowClear style="width:100%">
                  <a-select-option v-for="(item, index) in 2" :value="item" :key="index">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="油品" prop="oils">
                <a-select v-model="form.oils" placeholder="请选择油品" allowClear style="width:100%">
                  <a-select-option v-for="(item, index) in 2" :value="item" :key="index">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
        </a-form-model>
      </div>
      <div class="flex align-center justify-center">
        <a-button @click="configDeviceVisible = false"
          style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
        <a-button @click="configDeviceVisible = false" type="primary">确定</a-button>
      </div>
    </a-modal>
    <a-modal title="配置规则" v-model="configRulesVisible" :maskClosable="false" :width="510" centered :footer="null">
      <div>
        <a-form-model ref="ruleForm" :model="rulesForm" :rules="rulesFormRules" :colon="false" :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }">
              <a-form-model-item label="设备编号" prop="id">
                <a-input v-model="rulesForm.id" placeholder="ID" disabled />
              </a-form-model-item>
              <a-form-model-item label="设备名称" prop="deviceName">
                <a-input v-model="rulesForm.deviceName" placeholder="请输入设备名称" />
              </a-form-model-item>
              <a-form-model-item label="规则" prop="rulesId">
                <a-select v-model="rulesForm.rulesId" placeholder="请选择终规则" allowClear style="width:100%">
                  <a-select-option v-for="(item, index) in 2" :value="item" :key="index">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>

        </a-form-model>
      </div>
      <div class="flex align-center justify-center">
        <a-button @click="configRulesVisible = false"
          style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
        <a-button @click="configRulesVisible = false" type="primary">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {dataSource as ds} from "@/services";
import {getDevicesNew, getVagueSensors, getSessonsCodes, addDevices, updateDevicesNew} from "@/services/device";

const columns = [
  {
    title: '设备名称',
    dataIndex: 'device_name',
  },
  {
    title: '组织名称',
    dataIndex: 'sensor_name',
  },
  {
    title: '设备类型',
    dataIndex: 'device_type',
  },
  {
    title: '设备型号',
    dataIndex: 'device_mode',
  },
  {
    title: '在线状态',
    dataIndex: 'online_status',
    scopedSlots: { customRender: 'online_status' },
  },
  {
    title: '操作',
    width:350,
    scopedSlots: { customRender: 'action' },
  }
]
export default {
  name: "deviceManage",
  data() {
    return {
      columns,
      list: [],
      selectedRowKeys: [],

      searchForm: {
        page: 1,
        pageSize: 15,
        keyName:''
      },
      total: 0,
      visible: false,
      loading: false,
      title: '添加设备',
      form: {
        name: '',
        organizationId: undefined,
        macAddr: "",
      },
      rules: {
        sensor_id: [
          { required: true, message: '请选择组织', trigger: 'change' },
        ],
        device_position: [
          { required: true, message: '请输入位置', trigger: 'blur' },
        ],
        install_time: [
          { required: true, message: '请选择日期', trigger: 'change' },
        ]
      },
      sessonsList:[],
      configDeviceVisible: false,
      deviceForm: {},
      deviceRules: {
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请选择终端编码', trigger: 'change' },
        ],
      },
      configRulesVisible: false,
      rulesForm: {
        rulesId:undefined
      },
      rulesFormRules: {
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
        ],
        rulesId: [
          { required: true, message: '请选择终规则', trigger: 'change' },
        ],
      },
    }
  },
  mounted() {
    this.getData()
    this.getSessonsCodes()
  },
  methods: {
    getSessonsCodes(){
      getSessonsCodes().then((res) => {
          this.sessonsList=res;
      }).catch(() => {

      });
    },
    //删除
    del(row){
      let that=this;
      let ids='';
      if(!row){
        if(this.selectedRowKeys.length){
          let list=[];
          for(let i in this.selectedRowKeys){
            list.push(this.selectedRowKeys[i].id)
          }
          ids=list.join(',')
        }else {
          that.$message.success('请选择删除项');
          return
        }
      }else {
        ids=row.id
      }

      this.$confirm({
        content: '是否确定删除',
        onOk() {
          ds.delpost({ ids:ids }).then(res => {
            console.log(res)
            that.$message.success('删除成功');
            that.getData();
          })
        }
      });
    },
    //搜索
    search(){
      this.searchForm.page=1;
      //
      if(this.searchForm.keyName){
        let data={
          sensorCode:this.searchForm.keyName
        }
        getVagueSensors(data).then((res) => {
          this.list = res
          this.total =10
        }).catch(() => {

        });
      }else {
        this.getData()
      }

    },
    //重置
    reset(){
      this.searchForm={
        page: 1,
        pageSize: 15
      }
      this.getData()
    },
    //提交
    submit(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if(this.form.device_code){
            updateDevicesNew(this.form).then(res => {
              console.log(res);
              this.$message.success('提交成功')
              this.visible=false;
            })
          }else {
            addDevices(this.form).then(res => {
              console.log(res);
              this.$message.success('提交成功')
              this.visible=false;
            })
          }

        }
      })
    },
    handleGo(row){
      this.$router.push('details?id='+row.sensor_code)
    },
    getData() {
		console.log(this.$route.query.online) 
      // this.list=[]
      let data={
        pageNum: this.searchForm.page,
        pageSize: this.searchForm.pageSize,
		online:this.$route.query.online
      }
      this.loading=true;
      getDevicesNew(data).then((res) => {
        this.loading=false;
        console.log( res )
            this.list = res.deviceJson;
            this.total =Number(res.totalPages)*this.searchForm.pageSize;

      }).catch(() => {

      });
    },
    handleOpen(row) {
      console.log(row)
      if(row){
        this.visible = true
        this.form =Object.assign({}, row);
        this.title = row ? '编辑设备' : '添加设备'
      }else {
        this.visible = true
        this.form={}
        this.title = row ? '编辑设备' : '添加设备'
      }

    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    showSizeChange(current, pageSize) {
      this.searchForm.pageSize = pageSize;
      this.getData()
    },
    handlePageNo(current) {
      this.searchForm.page = current;
      console.log(current)
      this.getData()
    },
  }
}
</script>
<style scoped lang="less">
/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  background-color: #42487A;
  border-color: #999da0;
  color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
  background-color: #42487A;
  border-color: #999da0;
  color: #898a94;
}

/deep/ .ant-pagination-item {
  background-color: #42487A;
  border-color: #999da0;

}

/deep/ .ant-pagination-item a {
  color: #898a94;
}

/deep/ .ant-pagination-item-active {
  border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
  color: #fff;
}

/deep/ .ant-select-selection {
  background-color: #42487A;
  border-color: #999da0;
  color: #898a94;
}

/deep/ .ant-btn-link {
  color: #DADDED;
}
</style>
